<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-popover="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>属性模板管理</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">属性模板管理</h1>
            <div class="z-pop_question">
                <el-popover
                        ref="popoverq"
                        placement="bottom-start"
                        width="400"
                        trigger="hover">
                </el-popover>
                <i v-popover:popoverq class="el-icon-question"></i>
            </div>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>商品<span>/</span>属性模板管理</div>
        </div><!-- 页面头部 end -->

        <div class="list-content">
            <!--条件筛选-->
            <div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="属性名称" v-model="conditions.name.value" clearable class="minW40 z_input-holder"></el-input>
                        <el-select placeholder="行业类型" v-model="conditions.industryUuid.value" clearable class="z_select-holder">
                           <el-option v-for="industry in industrys" :key="industry.uuid" :label="industry.name" :value="industry.uuid"></el-option>
                        </el-select>
                        <el-select placeholder="是否规格属性" v-model="conditions.isSpec.value" clearable class="z_select-holder">
                            <el-option label="是" value="1">是 </el-option>
                            <el-option label="否" value="0">否 </el-option>
                        </el-select>
                    </div>
                    <div class="filter-operate">
                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
                <div class="filter-btn fr">
                    <el-button type="primary" @click="showDailog">新增属性</el-button>
                </div>
            </div>

            <!--主体表格-->
            <div class="z-tables">
                <el-table ref="multipleTable" :data="attrList" style="width: 100%;">
                    <el-table-column fixed type="index" label="序号" class-name="z-opt_btn"></el-table-column>
                    <el-table-column label="属性名称" min-width="100" prop="name"></el-table-column>
                    <el-table-column label="行业类型" min-width="100" prop="industryName"></el-table-column>
                      <el-table-column  label="是否规格属性" min-width="100">
                       <template scope="scope">
                            <span v-if="scope.row.spec">是</span>
                            <span v-if="!scope.row.spec">否</span>
                        </template>
                     </el-table-column>
                    <el-table-column prop="attrValueStr" label="属性值" min-width="300"></el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="80" >
                       <template slot-scope="scope">
                            <el-button type="text" @click="editDailog(scope.$index, scope.row)">编辑</el-button>
							<span class="table-spea-line">|</span>
							<el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--分页-->
            <div class="grid-content">
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
		 <!-- 新增模态框 -->
		 <el-dialog :title="openText" :visible.sync="dialogFormVisible">
		  <el-form :model="attr" :rules="rules" ref="attr-form" label-width="100px" class="demo-ruleForm el-input-95">
		     <el-form-item hidden
					label="ID" prop="uuid"> <el-input
					v-model="attr.uuid"></el-input> 
			</el-form-item> 
			<el-form-item label="属性名称" prop="name">
				<el-input v-model="attr.name"></el-input>
			</el-form-item>
			<el-form-item label="行业类型" prop="industryCate">
               <el-select v-model="attr.industryUuid" placeholder="请选择行业类别">
               <el-option v-for="industry in industrys" :key="industry.uuid" :label="industry.name" :value="industry.uuid"></el-option>
              </el-select>
            </el-form-item>
			<el-form-item label="是否规格属性" prop="spec">
			   <el-radio-group v-model="attr.spec">
				   <el-radio :label=1>是</el-radio>
				   <el-radio :label=0>否</el-radio> 
			   </el-radio-group> 
			</el-form-item>
			<el-form-item label="属性值" class="mb_0">
				<el-popover
				  ref="popoverb2"
				  placement="bottom"
				  trigger="hover">
				  <p class="z-jiao">1、某个规格类型（颜色）：有4个规格内容（红色 黑色 白色 蓝色） 2、某个归类类型（尺寸）：有4个规格内容（M L XL XXL）</p>
				</el-popover>
				<i v-popover:popoverb2 class="el-icon-question"></i>
			</el-form-item>
			<div class="format_table">
				<div class="z-tables">
					<el-table ref="multipleTable" :data="attr.tableData3" style="width: 100%;">
							<el-table-column type="index" label="序号" width="55"></el-table-column>
							<el-table-column label="属性值" min-width="130">
							<template slot-scope="scope">
									<el-form-item :prop="'tableData3.' + scope.$index + '.value'" :rules="{max: 5, message: '名称最多5个字符', trigger: 'blur'}" :inline-message="true" label-width="0" class="el-form-inline-bottom">
							    	<el-input v-model="scope.row.value" placeholder="最多5个字符"></el-input>
							    </el-form-item>
							</template>
							</el-table-column>
		
					    <el-table-column label="操作" min-width="60">
							<template slot-scope="scope">
							    <el-button type="text" @click="removeDomain(scope.$index, scope.row)">删除</el-button>
							</template>
					    </el-table-column>
					</el-table>
				</div>
				<el-button type="text" @click="addDomain">继续添加</el-button>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer" id="addDialog" style="display: none">
		<el-button @click="save" type="primary">确定</el-button>
		<el-button @click="dislogHide">取消</el-button>
		</div>
		<div slot="footer" class="dialog-footer" id="editDialog" style="display: none">
				<el-button @click="updateSpec" type="primary">确定</el-button>
				<el-button @click="dislogHide">取消</el-button>
		</div>
	</el-dialog>
  </div>
</div>
</div>
</body>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            loading: true,
            attrList: [], // 列表数据model
			industrys: [[${industrys}]], // 行业类别数组
            dialogFormVisible: false,
            tableAllCheck: false,  // table 下方批量操作全选
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            conditions: {       // 查询条件
                "name": {
                    "operation": "LIKE",
                    "value": undefined
                },
                "industryUuid": {
                    "operation": "EQ",
                    "value": undefined
                },
                "isSpec": {
                    "operation": "EQ",
                    "value": undefined
                }
            },
            attr: {
            	uuid: '',
            	createTime: '',
            	name: '',
            	spec: 1,
            	industryUuid: '',
                attrValues:[],
                 // 属性值表格数据内容
		        tableData3: [
		        	{
		        		value: '',
		        	},
		        ],
            },
            rules: {
            	name: [
                       {required: true, message: "请输入规格名称", trigger: 'blur'},
                       {max: 10, message: '规格名称不能超过10个字符', trigger: 'blur' }
                   ],
                industryUuid: [
                           {required: true, message: "请选择行业类型", trigger: 'change'},
                       ]
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
        },
        created: function () {
            this.queryList();
        },
        methods: {
            // 属性值列表操作函数
            addDomain() {
                this.attr.tableData3.push({
                  value: ''
                });
              },
  			removeDomain(index, row) {
  				if (index !== -1) {
  					this.attr.tableData3.splice(index, 1)
  				}
  		    },
   	       dislogHide: function () {
   	  	      	this.dialogFormVisible = false;
   	  	      },
            change: function (ele) {
                console.log(this.valueState);
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryList();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryList();
            },
            handleQuery() {
                this.currentPage = 1;
                this.queryList();
            },
            handleClear() {
                this.conditions.name.value = "";
                this.conditions.isSpec.value = "";
                this.conditions.industryUuid.value = "";
            },
            showDailog: function () {
      	    	this.dialogFormVisible = true;
      	    	this.openText = "新增商品多规格";
      	    	$("#addDialog").css('display','block'); 
      	    	$("#editDialog").css('display','none'); 
      	    	this.attr.createTime = '';
             	this.attr.uuid = '';
             	this.attr.industryUuid = '';
              	this.attr.name = '';
              	this.attr.spec = 1;
            	this.attr.tableData3 = [{value: '',}];
            	this.attr.attrValues = [];
      	      },
            editDailog: function(index,row){
            	this.dialogFormVisible = true;
            	this.attr.createTime = row.createTime;
            	this.attr.industryUuid = row.industryUuid;
            	this.attr.tableData3 = [];
            	this.attr.attrValues = [];
            	this.openText = "编辑商品多规格";
      	    	$("#addDialog").css('display','none'); 
      	    	$("#editDialog").css('display','block'); 
              	this.attr.uuid = row.uuid;
              	this.attr.name = row.name;
              	this.attr.spec = (row.spec == true)?1:0;
              	var values = row.values;
              	console.info(values);
              	for (var i= 0;i<values.length;i++) {
              		this.attr.tableData3.push({
                        value: (values[i]).value
                    });
              	}
              },
            // CUD函数
            save: function () {
  	            var self = this;
  	            self.attr.attrValues = [];
  	            self.$refs['attr-form'].validate((valid) => {
  	                if (valid) {
  	                	    var domainValus = self.attr.tableData3;
  	     	                var valiFlag = false;
		  	   	            for(var i= 0;i<domainValus.length;i++){
		  	   	            	var value = domainValus[i].value;
		  	   	            	if (value != "") {
		  	   	            		self.attr.attrValues.push(value);
		  	   	            		valiFlag = true;
		  	   	            	}
		  	   	            }
		  	   	            if (!valiFlag) {
		  	   	            	  self.$message({
		  	                               message: '至少设置一项属性值!',
		  	                               type: 'error',
		  	                               customClass: 'message-center',
		  	                           });
		  	   	            	  return;
		  	   	            }
  	                    $.ajax({
  	                        url: "/backstage/cater/producttemplateattr/save",
  	                        type: "POST",
  	                        data: JSON.stringify(self.attr),
  	                        contentType: "application/json;charset=UTF-8",
  	                        dataType: "json",
  	                        success: function(data) {
  	                            if (data && data.returnCode == "1") {
                                      self.$message({
                                          message: '新增属性成功',
                                          type: 'success',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cater/producttemplateattr/tolist';
                                          }
                                      });
  	                            } else {
  	                                self.$message({
  	                                        message: '新增属性失败',
  	                                        type: 'error',
  	                                        duration: 1000,
  	                                        customClass: 'message-center',
  	                                        onClose: function () {
  	                                            window.location.href = '/backstage/cater/producttemplateattr/tolist';
  	                                        }
  	                                    });
  	                            }
  	                        }
  	                    });
  	                }
  	            });
  	        },
  	        updateSpec: function () {
  	            var self = this;
  	            self.attr.attrValues = [];
  	            self.$refs['attr-form'].validate((valid) => {
  	                if (valid) {
                	    var domainValus = self.attr.tableData3;
 	     	            var valiFlag = false;
	  	   	            for(var i= 0;i<domainValus.length;i++){
	  	   	            	var value = domainValus[i].value;
	  	   	            	if (value != "") {
	  	   	            		self.attr.attrValues.push(value);
	  	   	            		valiFlag = true;
	  	   	            	}
	  	   	            }
	  	   	            if (!valiFlag) {
	  	   	            	  self.$message({
 	                               message: '至少设置一项属性值!',
 	                               type: 'error',
 	                               customClass: 'message-center',
	  	                           });
	  	   	            	  return;
	  	   	            }
  	                    $.ajax({
  	                        url: "/backstage/cater/producttemplateattr/update",
  	                        type: "POST",
  	                        data: JSON.stringify(self.attr),
  	                        contentType: "application/json;charset=UTF-8",
  	                        dataType: "json",
  	                        success: function(data) {
  	                            if (data && data.returnCode == "1") {
                                      self.$message({
                                          message: '编辑属性成功',
                                          type: 'success',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cater/producttemplateattr/tolist';
                                          }
                                      });
  	                            } else {
                                      self.$message({
                                          message: '编辑属性失败',
                                          type: 'error',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cater/producttemplateattr/tolist';
                                          }
                                      });
  	                            }
  	                        }
  	                    });
  	                }
  	            });
  	        },
            handleDelete(index, row) {
                let self = this;
                self.$confirm('确认要删除此属性?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    $.ajax({
                        url: "/backstage/cater/producttemplateattr/delete",
                        type: "POST",
                        data: JSON.stringify([row.uuid]),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode == "1") {
                                self.$message({
                                    message: '删除属性成功',
                                    type: 'success',
                                    duration: 1000,
                                    customClass: 'message-center'
                                });
                                self.handleQuery();
                            } else {
                                self.$message({
                                    message: '删除属性失败',
                                    type: 'error',
                                    duration: 1000,
                                    customClass: 'message-center'
                                });
                            }
                        }
                    });
                });
            },
            handleCommand(command) {
                this.$message('click on item ' + command);
            },
            // 列表批量操作2-批量导出
            handleCommand2(command) {
                this.$message('click on item ' + command);
            },
            tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },

            // 列表筛选项更多操作
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            queryList() {
                this.loading = true;
                let queryMessage = {
                    "queryPage": this.currentPage,
                    "pageShow": this.pageSize,
                    "queryParams": this.conditions,
                    "sortMap": {
                        "uuid": "desc"
                    }
                };
                $.ajax({
                    url: "/backstage/cater/producttemplateattr/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                            app.attrList = data.returnMessage;
                            app.totalNum = data.pager.totalNum;
                        }
                        app.loading = false;
                    }
                });
            }
        }
    });


</script>
</html>